<template>
    <div>
        <!-- “:inline="true"”表示“一行显示表单”（即“行内表单”） -->
        <el-form ref="searchForm" :model="searchMap" :inline="true" class="demo-form-inline">
            <el-form-item prop="nameAndRegionOfSuperiorSupplier">
                <el-input v-model="searchMap.nameAndRegionOfSuperiorSupplier" class="nameAndRegionOfSuperiorSupplier" placeholder="上级供应商的名称和所在地"></el-input>
            </el-form-item>
            <el-form-item prop="linkmanName">
                <el-input v-model="searchMap.linkmanName" class="linkmanName" placeholder="           联系人的姓名           "></el-input>
            </el-form-item>
            <el-form-item prop="phoneNumber">
                <el-input v-model="searchMap.phoneNumber" class="phoneNumber" placeholder="       联系人的手机号码       "></el-input>
            </el-form-item>
            <!-- 因为“isDialog”的值是“true”，所以“!isDialog”的值是“false”，所以以下的模板代码中所有含有“v-if="!isDialog"”的标签在弹出的对话框中全部不显示↓ -->
            <el-form-item prop="brandAndModelOfSupply" v-if="!isDialog">
                <el-select v-model="searchMap.brandAndModelOfSupply" class="brandAndModelOfSupply" placeholder="      供应的品牌和型号      ">
                    <!-- 在此处不要忘记把全局变量“brandAndModelOfSupplyOptions”绑定到“data()”中，否则浏览器会报错说“payTypeOptions未定义”（也就是说在模板中引用不了全局变量。因为浏览器只会从Vue实例中的data属性中去找这个变量。所以如果不把它绑定到“data()”里，浏览器就找不到它）↓ -->
                    <el-option v-for="option in brandAndModelOfSupplyOptions" :key="option.id" :label="option.name" :value="option.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="fetchData">查询</el-button>
                <el-button type="primary" @click="handleAdd" v-if="!isDialog">新增</el-button>
                <el-button @click="resetForm('searchForm')" v-if="!isDialog">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 1.“highlight-current-row”被用于激活单选行；2.当点击某一行后会触发事件“@current-change”，从而调用对应的函数“clickCurrentRow”，并且这个函数会接收两个参数：“currentRow”（当前行）和“oldCurrentRow”（旧的行）（其中“oldCurrentRow”可以不填（即不传入），因为用得较少）↓ -->
        <!-- <el-table :data="list" :cell-style="rowStyle" height="380" border style="width: 100%" highlight-current-row @current-change="clickCurrentRow"> -->
        <!-- “ :highlight-current-row="isDialog"”表示“只有当‘Supplier’作为‘Goods’的子组件是被弹出的对话框而非普通的表格时，‘选中并高亮显示当前行’才有效”↓ -->
        <el-table ref="table" :data="list" :cell-style="rowStyle" height="380" border style="width: 100%" :highlight-current-row="isDialog" @current-change="clickCurrentRow">
            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
            <el-table-column prop="nameAndRegionOfSuperiorSupplier" align="center" label="上级供应商的名称和所在地" width="189"></el-table-column>
            <el-table-column prop="linkmanName" align="center" label="联系人的姓名"></el-table-column>
            <el-table-column prop="phoneNumber" align="center" label="联系人的手机号码"></el-table-column>
            <el-table-column prop="brandAndModelOfSupply" align="center" label="供应的品牌和型号" v-if="!isDialog"><!-- “"scope"”代表“当前行对象” --><!-- <template slot-scope="scope"><span>{{scope.row.brandAndModelOfSupply | brandAndModelOfSupplyfilter}}</span></template> --></el-table-column>
            <el-table-column prop="purchasePrice" width="55" align="center" label="进价" v-if="!isDialog"></el-table-column>
            <el-table-column prop="remark" align="center" label="备注" v-if="!isDialog"></el-table-column>
            <el-table-column align="center" label="操作" v-if="!isDialog"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button></template></el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <!-- layout="total, sizes, prev, pager, next, jumper"↓ --><!-- Supplier若是普通的表格，则分页组件显示完整版；Supplier若是对话框，则分页组件只显示“页码”、“上一页”和“下一页”↓ -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :layout="!isDialog ? 'total, sizes, prev, pager, next, jumper':'prev, pager, next'" :total="total"> </el-pagination>
        
        <!-- 这是新增供应商用的对话框。其中“title”表示“对话框的标题”，当“:visible.sync”为“true”时会弹出对话框↓ -->

        <!-- “v-if="!isDialog"”表示若“‘Supplier’是作为‘Goods’的子组件，是被弹出的对话框时，则无需加载此对话框”。这样可以减少弹出对话框时的资源开销↓ -->
        <el-dialog title="编辑供应商" :visible.sync="dialogFormVisible" width="376.5px" v-if="!isDialog">
            <el-form :model="beSubmittedData" ref="beSubmittedForm" :rules="rules" label-width="125px" label-position="right" style="width:356.5px;">
                <el-form-item label="名称和所在地" prop="nameAndRegionOfSuperiorSupplier"> <!-- “autocomplete”是HTML5中新出的属性，被用作“浏览器自动填充用户在输入框中曾经输入过的数据”↓ -->                    
                    <el-input v-model="beSubmittedData.nameAndRegionOfSuperiorSupplier" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人的姓名" prop="linkmanName"> <!-- “autocomplete”是HTML5中新出的属性，被用作“浏览器自动填充用户在输入框中曾经输入过的数据”↓ -->                    
                    <el-input v-model="beSubmittedData.linkmanName" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人的电话" prop="phoneNumber">
                    <el-input v-model="beSubmittedData.phoneNumber" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="brandAndModelOfSupply" label="手机品牌型号">
                    <el-select v-model="beSubmittedData.brandAndModelOfSupply" style="width: 185px;" placeholder="      供应的品牌和型号      ">
                        <el-option v-for="option in brandAndModelOfSupplyOptions" :key="option.id" :label="option.name" :value="option.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="该手机的进价" prop="purchasePrice">
                    <el-input v-model="beSubmittedData.purchasePrice" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="beSubmittedData.remark" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="primary" @click="addData('beSubmittedForm')">确 定</el-button> -->
                <el-button type="primary" @click="beSubmittedData.id === null ? addData('beSubmittedForm') : updateData('beSubmittedForm')">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import supplierApi from '@/api/supplier'

const brandAndModelOfSupplyOptions = [
    {id:'1',name:'华为 Mate30 5G'},
    {id:'2',name:'小米 MIX4'},
    {id:'3',name:'OPPO reno6 5G'},
    {id:'4',name:'vivo X70'},
]

export default {
    props:{
        // 接收父组件Goods传递过来的数据，通过“isDialog”来判断是否为弹出的对话框。当“isDialog”的值为“true”时是弹出的对话框，为“false”时则是普通的列表（表格）。
        isDialog:Boolean
    },
    data(){
        return {
            list:[],
            total:0, // ←左边这项表示“总记录数”
            currentPage:1, // ←左边这项表示“当前页码”
            pageSize:10, // ←左边这项表示“每页显示10条数据”
            searchMap:{ // ←左边这项表示“条件查询绑定的条件值（字段值）”
                nameAndRegionOfSuperiorSupplier:'',
                linkmanName:'',
                phoneNumber:'',
                brandAndModelOfSupply:'',
            },
            dialogFormVisible:false, // ←左边这项被用来控制对话框是否会被弹出
            beSubmittedData:{ // ←左边这项被用来表示“在对话框中被提交的数据”
                id:null,
                nameAndRegionOfSuperiorSupplier:'',
                linkmanName:'',
                phoneNumber:'',
                brandAndModelOfSupply:'',
                purchasePrice:'',
                remark:'',
            },
            rules:{ // ←左边这项被用来表示“表单的校验规则”
                nameAndRegionOfSuperiorSupplier:[{required:true,message:'名称和所在地必填',trigger:'blur'}],
                linkmanName:[{required:true,message:'联系人的姓名必填',trigger:'blur'}],
                phoneNumber:[{required:true,message:'联系人的电话必填',trigger:'blur'},{min:11,max:11,message:'手机号码是11位数',trigger:'blur'}],
                brandAndModelOfSupply:[{required:true,message:'手机品牌型号必填',trigger:'change'}],
                purchasePrice:[{required:true,message:'进货价格不能为空',trigger:'blur'}],
                remark:[{required:true,message:'备注信息不能为空',trigger:'blur'}],
            },
            brandAndModelOfSupplyOptions, // ←左边这项相当于“brandAndModelOfSupplyOptions:brandAndModelOfSupplyOptions”，表示把全局变量“brandAndModelOfSupplyOptions"绑定进来
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        // 这个函数（方法）在“每页显示条数被改变”时被触发，“value”代表“最新的每页显示的条数”↓
        handleSizeChange(value){
            console.log(value)
            this.pageSize = value
            this.fetchData()
        },
        // 这个函数（方法）在“当前页码被改变”时被触发，“value”代表“最新的页码”↓
        handleCurrentChange(value){
            console.log(value)
            this.currentPage = value
            this.fetchData()
        },
        resetForm(formName){
            this.$refs[formName].resetFields()
        },
        fetchData(){
            /* supplierApi.getList().then(response => {
                const be_responsed_supplier_data = response.data
                this.list = be_responsed_supplier_data.data
                console.log(this.list)
                console.log(be_responsed_supplier_data)
            }) */
            supplierApi.search(this.currentPage,this.pageSize,this.searchMap).then(response => {
                // 调用分页查询数据
                const be_responsed_supplier_data = response.data
                console.log(be_responsed_supplier_data.data.rows)
                console.log(be_responsed_supplier_data.data.total)
                this.list = be_responsed_supplier_data.data.rows
                this.total = be_responsed_supplier_data.data.total
            })
        },
        // 打开编辑窗口
        handleEdit(id){
            console.log('删除',id)
            this.handleAdd() // ←注意：此处不能直接使用“this.dialogFormVisible = true”来弹出对话框，因为需要调用“handleAdd”方法来清除这个对话框在这次被打开之前被打开时里面的表单上面可能残存的数据和样式（即校验结果）
            supplierApi.getSupplierInformationById(id).then(response => {
                const be_responsed_data = response.data
                if (be_responsed_data.flag) {
                    this.beSubmittedData = be_responsed_data.data
                    console.log(this.beSubmittedData)
                }
                else{ //提示获取数据失败
                    this.$message({
                        message:be_responsed_data.message,
                        type:'warning',
                        center:true
                    })
                }
            })
        },
        // 更新数据
        updateData(formName){
            console.log('updateData')
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 提交更新的数据（必须在页面里的表单通过数据校验的情况下发送请求进行更新）
                    supplierApi.updateSupplierInformation(this.beSubmittedData).then(response =>{
                        const be_responsed_data = response.data
                        if (be_responsed_data.flag) {
                            // 更新数据成功，然后刷新数据列表
                            this.fetchData()
                            this.dialogFormVisible = false
                        }
                        else{
                            this.$message({
                                message:be_responsed_data.message,
                                type:'warning',
                                center:true
                            })
                        }
                    })
                }
                else{
                    return false
                }
            })
        },
        // 删除供应商
        handleDelete(id){
            console.log('删除',id)
            this.$confirm('你确定要删除这位供应商吗？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消'
            }).then(() => {
                // 若点击“确定”则执行如下代码↓
                console.log('确认')
                supplierApi.deleteSupplierInformationById(id).then(response => {
                    const be_responsed_data = response.data
                    // 提示供应商被删除成功或者被删除失败
                    this.$message({
                        message:be_responsed_data.message,
                        center:true,
                        type:be_responsed_data.flag?'success':'error'
                    })
                    if (be_responsed_data.flag) {
                        // 删除供应商成功，然后刷新列表数据
                            this.fetchData()
                    }
                })
            }).catch(() =>{
                // 点击“取消”。此处无需做任何逻辑处理（因为浏览器会自动关闭消息提示框）
                console.log('取消')
            })
        },
        // 弹出新增窗口
        handleAdd(){
            console.log(this.beSubmittedData)
            this.dialogFormVisible = true
            this.$nextTick(() => { // ←左边这项是Vue中提供的内置的方法，因为回调函数无参数，所以要保留小括号。另外“this.$nextTick”是一个“异步事件”（指“当页面渲染结束后它的回调函数才会被执行”的事件），因为弹出窗口打开后需要花费时间加载（渲染）Dom（即那个表单），所以我们就应该等待它加载完成后再调用“resetFields”方法来重置表单和清除样式。
                this.$refs['beSubmittedForm'].resetFields()
            })
        },
        // 提交新增的数据
        addData(formName){
            this.$refs[formName].validate(valid => {
                if(valid){
                    // 提交表单
                    console.log('addData')
                    supplierApi.addSupplier(this.beSubmittedData).then(response => {
                        const be_responsed_data = response.data
                        if(be_responsed_data.flag){
                            // 新增供应商成功，然后刷新列表数据
                            this.fetchData()
                            this.dialogFormVisible = false // 关闭窗口
                        }
                        else{
                            // 新增供应商失败，弹出提示信息
                            this.$message({
                                message:be_responsed_data.message,
                                type:'warning',
                                center:true
                            })
                        }
                    })
                }
                else{
                    return false
                }
            })
        },
        // 当点击表格中的某一行时，会调用这个函数进行处理
        clickCurrentRow(currentRow){
            this.$message({
                message:'提示：当前选择的上级供应商的名称和所在地是' + currentRow.nameAndRegionOfSuperiorSupplier + '，' + '联系人的姓名是' + currentRow.linkmanName + '，' + '联系人的手机号码是' + currentRow.phoneNumber + '，' + '供应的品牌和型号是' + currentRow.brandAndModelOfSupply + '，' + '进货价格是' + currentRow.purchasePrice +'。',
                // type:'success'
            })
            console.log(currentRow.nameAndRegionOfSuperiorSupplier)
            console.log(currentRow.linkmanName)
            console.log(currentRow.phoneNumber)
            console.log(currentRow.brandAndModelOfSupply)
            console.log(currentRow.purchasePrice)
            console.log(`提示：当前选择的上级供应商的名称和所在地是${currentRow.nameAndRegionOfSuperiorSupplier}，联系人的姓名是${currentRow.linkmanName}，联系人的手机号码是${currentRow.phoneNumber}，供应的品牌和型号是${currentRow.brandAndModelOfSupply}，进货价格是${currentRow.purchasePrice}。`)
            // this.$emit(event, ${[…args]})，其中第一个参数“event”表示“被触发的事件的名称”（注意：一定要用英文状态下的单引号把该事件的名称引起来，否则浏览器的控制台会报错说“该事件未定义”），第二个参数“${[…args]}”表示“被传递的数据”↓
            // 点击后，若要将点击的数据传递到父组件“Goods”（商品管理）中，则可以触发父组件“Goods”中的自定义事件“be_Selected_Supplier”（因为这个事件被触发后父组件“Goods”可以在这个事件对应的处理函数中接收到数据“currentRow”）↓
            this.$emit('be_Selected_Supplier', currentRow)
        },
        rowStyle(){
            return "text-align:center";
        },
    },
    /* filters: {
        brandAndModelOfSupplyfilter(id){
            const brandAndModelOfSupplyObject = brandAndModelOfSupplyOptions.find(obj => obj.id === id)
            return brandAndModelOfSupplyObject ? brandAndModelOfSupplyObject.name : null
        }
    }, */

    watch: {
        // 监听器（监听表格绑定的数据发生的变化。被用于当表格绑定的数据发生变化时重新布局表格，使每一列的表头与表体不发生错位）
        list:{
            handler(){
                this.$nextTick(() => {
 		            // 初始化表格（即每一列在接收到新数据时根据新的数据自动重新调整列宽（即“重新布局表格”），使表头与表体不发生错位）
                    this.$refs.table.doLayout();
                })
            },
            deep:true
        }
    }
}
</script>

<style lang="scss" scoped>
    div{::v-deep.el-pagination{margin-top: 5px;margin-bottom: 5px;}}
    .el-pagination{text-align: center;}
    .el-form{
        margin-top:15px;
        margin-bottom:15px;
        height:40px;
    }
    .el-select-dropdown__item{text-align: center;}
    // .brandAndModelOfSupply{width: 160px;}
    .brandAndModelOfSupply{width: 194px;}
    div{::v-deep.el-input__inner{text-align: center;}}
    div{::v-deep.el-textarea__inner{height: 38px;text-align: center;}}
    div{::v-deep.el-dialog__body{height: 350px;overflow-y: hidden;overflow-x: hidden;}}
    div{::v-deep.el-form-item__error{white-space: pre;top: 28px;left:14px;text-align: center;}}
</style>